import {Input, NavBar, TextArea} from 'antd-mobile'

import styles from './index.module.scss'
import {useMemo, useState} from "react";
import {popMap} from "@/pages/Profile/Edit";

const EditInput = ({onClose, inputPop, updateName}) => {
  const [value, setValue] = useState(inputPop.value);

  //实现的需求：
  // 子组件提交的昵称数据，父组件可以打印出来
  // 修改的目的：提交到接口 下一次刷新的时候获取的就是最新的数据
  // 提交接口
  // 更新redux的状态 ==> 界面实时更新（展示的内容是从redux里面获取的）


  const onSave = () => {
    // 提交的时候需要判断类型
    // 如果是昵称修改 ==> 提交给name
    // 如果说是简介 ==> 提交给intro
    updateName({
      // name
      [inputPop.type]: value
    }) // name intro
  }

  const [label, isName] = useMemo(() => {
    return [popMap[inputPop.type]?.label, inputPop.type === popMap.name.type]
  }, [inputPop]);
  return (
    <div className={styles.root}>
      <NavBar
        onBack={onClose}
        className="navbar"
        right={<span className="commit-btn" onClick={onSave}>提交</span>}
      >
        编辑{label}
      </NavBar>

      <div className="edit-input-content">
        <h3>{label}</h3>

        <div className="input-wrap">

          {
            isName ?  <Input
              value={value}
              onChange={setValue}
              placeholder="请输入"
            /> : (
              <TextArea
                className={'textarea'}
                placeholder={'请输入简介信息'}
                showCount // 展示输入的字数
                maxLength={100} // 最大的输入长度
                rows={4}// 指定高度
                value={value}
                onChange={setValue}
              />
            )
          }
        </div>
      </div>
    </div>
  )
}

export default EditInput
